<!-- 新增点位dialog -->
<template>
  <div>
    <!-- 新增dialog -->
    <el-dialog
      :title="title"
      :visible="addDialog"
      width="30%"
      @close="closeAddDialog"
    >
      <el-form ref="addRef" :model="addObj" :rules="addRule" label-width="130px">
        <el-form-item label="点位名称:" prop="name">
          <el-input v-model="addObj.name" placeholder="请输入" style="width:80%;" maxlength="15" show-word-limit />
        </el-form-item>
        <el-form-item label="所在区域:" prop="regionId">
          <el-select v-model="addObj.regionId" style="width:80%">
            <el-option
              v-for="item in nodeList"
              :key="item.id"
              :label="item.region.name"
              :value="item.region.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属商圈:" prop="businessId">
          <el-select v-model="addObj.businessId" style="width:80%">
            <el-option
              v-for="item in businessList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="归属合作商:" prop="ownerId">
          <el-select v-model="addObj.ownerId" style="width:80%">
            <el-option
              v-for="item in partner"
              :key="item.id"
              :owner-name="(addObj.ownerName = item.ownerName)"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址:" prop="addr">
          <el-cascader
            v-model="selectedOptions"
            size="large"
            :options="options"
            style="width:80%; margin-bottom: 20px;"
            @change="handleChange"
          />
          <el-input v-model="addObj.addr" type="textarea" :rows="2" placeholder="请输入详细地址" maxlength="60" show-word-limit style="width:80%" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeAddDialog">取 消</el-button>
        <el-button type="warning" @click="subAdd">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看详情dialog -->
    <el-dialog
      title="点位详情"
      width="30%"
      :visible="lookDialog"
      @close="closeLookDialog"
    >
      <el-table :data="detailList" max-height="400px" style="width: 100%" :header-cell-style="{padding:0,background:'#f3f6fb',height:'40px'}" :cell-style="{borderBottom:0}">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="innerCode" label="机器编号" />
        <el-table-column prop="vmStatus" label="设备状态">
          <template #default="{ row }">
            {{ vmStatusMap[row.vmStatus] }}
          </template>
        </el-table-column>
        <el-table-column prop="lastSupplyTime" label="最后一次供货时间" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { addNodeApi, editNood } from '@/api'
import { regionData, CodeToText } from 'element-china-area-data'
export default {
  props: {
    addDialog: {
      type: Boolean,
      default: false
    },
    lookDialog: {
      type: Boolean,
      default: false
    },
    partner: {
      type: Array,
      default: () => {}
    },
    nodeList: {
      type: Array,
      default: () => {}
    },
    detailList: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {
      // 售货机状态
      vmStatusMap: {
        0: '未投放',
        1: '运营',
        3: '撤机'
      },
      // 新增对象
      addObj: {
        name: '',
        addr: '',
        areaCode: '',
        regionID: '',
        ownerName: ''
      },
      loc: [],
      // 新增表单验证
      addRule: {
        name: [{ required: true, message: '请输入点位名称', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        addr: [{ required: true, message: '请输入详细地址', trigger: 'blur' },
          { min: 1, max: 60, message: '不超过60个字符', trigger: 'blur' }],
        regionId: [{ required: true, message: '请选择一项', trigger: 'blur' }],
        ownerName: [{ required: true, message: '请选择一项', trigger: 'blur' }],
        businessId: [{ required: true, message: '请选择一项', trigger: 'blur' }],
        ownerId: [{ required: true, message: '请选择一项', trigger: 'blur' }]
      },
      // 商圈类型格式转换
      businessList: [
        {
          id: 1,
          name: '学校'
        },
        {
          id: 2,
          name: '工厂'
        },
        {
          id: 3,
          name: '写字楼'
        },
        {
          id: 4,
          name: '交通枢纽'
        }
      ],
      // 级联地区
      options: regionData,
      selectedOptions: []
    }
  },
  computed: {
    title() {
      return this.addObj.id ? '修改点位' : '新增点位'
    }
  },
  methods: {
    // 关闭查看详情dia
    closeLookDialog() {
      this.$emit('closeLook')
    },
    // 点击提交新增
    subAdd() {
      this.$refs.addRef.validate(async valid => {
        if (!valid) return
        if (this.addObj.id) {
          await editNood(this.addObj)
        } else {
          await addNodeApi({ ...this.addObj, addr: this.loc.join('-') + '-' + this.addObj.addr, createUserId: 1 })
        }
        this.closeAddDialog()
      })
    },
    // 关闭新增dia
    closeAddDialog() {
      // 关闭弹窗
      this.$emit('closeDia')
      // 重置表单
      this.$refs.addRef.resetFields()
      this.addObj = {
        name: '',
        addr: '', // 详细地址
        areaCode: '', // 最后一级区域id
        regionId: '', // 所属区域Id
        ownerName: '', // 合作商名称
        ownerId: '', // 合作商Id
        businessId: '' // 所属商圈Id
      }
      this.selectedOptions = []
      // 刷新页面
      this.$emit('getNodeList')
    },
    // 级联地区转换
    handleChange(val) {
      for (let i = 0; i < this.selectedOptions.length; i++) {
        this.loc.push(CodeToText[this.selectedOptions[i]])
      }
      console.log(val)
    }
  }
}
</script>

<style>

</style>
